<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>轮播图</title>
    <style>
        body,
        ul {
            margin: 0;
            padding: 0
        }

        .clearfix::after {
            content: '';
            display: block;
            clear: both;
        }

        ul {
            list-style: none;
            font-size: 0;
            transition: 0.3s;

        }

        .swipper {
            width: 800px;
            outline: 3px solid red;
            margin: 100px auto;
            overflow: hidden;
            height: 333px;
            position: relative;
        }

        ul li {

            width: 800px;
        }

        ul li img {
            width: 100%;
        }

        .circle {
            position: absolute;
            right: 10px;
            bottom: 10px;
        }

        .circle span {
            display: inline-block;
            color: white;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: rgb(216, 158, 132);
            text-align: center;
            line-height: 30px;
            font-size: 20px;
            cursor: pointer;
        }

        .circle span:hover {
            background-color: rgb(224, 135, 94);
            ;
        }
    </style>
</head>

<body>
    <div class="swipper">
        <ul id="item-container" class="clearfix">
            <li>
                <img src="./images/1.webp" alt="">
            </li>
            <li>
                <img src="./images/2.webp" alt="">
            </li>
            <li>
                <img src="./images/3.webp" alt="">
            </li>
            <li>
                <img src="./images/4.webp" alt="">
            </li>
            <li>
                <img src="./images/5.webp" alt="">
            </li>
        </ul>
        <div class="circle">
            <span data-index=0 >1</span>
            <span data-index=1>2</span>
            <span data-index=2>3</span>
            <span data-index=3>4</span>
            <span data-index=4>5</span>
        </div>

    </div>
    <script src="轮播图.js"></script>
    <script>
        (function () {

            let itemContainer = document.getElementById("item-container")
            let swipper = document.querySelector('.swipper')
            let circles = document.querySelectorAll('.circle span')
            let y = 0
            function move(index) {
                //如果没有输入参数默认移动到下一张
                if (index == undefined) {
                    if (y <= -333 * 4) {
                        y = 0
                    } else {
                        y -= 333
                    }
                } else {
                    //否则根据参数的索引进行移动
                    y = index * -333
                }
                //设置移动的距离
                itemContainer.style.transform = `translateY(${y}px)`
            }

            var t;
            t = setInterval(move, 1000)

            swipper.addEventListener('mouseenter', function () {
                clearInterval(t)

            })

            swipper.addEventListener('mouseleave', function () {
                //修改全变变量t为当前定时器的返回值
                t = setInterval(move, 1000)
            })

            circles.forEach(function (el) {
                el.addEventListener('mouseenter', function (e) {
                    let curSpan = e.target
                    let curIndex = curSpan.dataset.index
                    move(curIndex)
                })
            })
        })

    </script>
</body>

</html>